{extend name="base/base" /}
{block name="head"}{__block__}{/block}
{block name="header"}{__block__}{/block}
{block name="body"}
    <div class="botom-content-wrap">
        <div class="content-one-wrap">
            <div class="one-top-next flex-lr">
                <div class="flex-l names">
                    <img src="/static/assets/images/index/svg1.svg" class="svg1" alt="">
                    <div data-i18n="index_t1"></div>
                </div>
				
				<div style="color: black;font-size: 20px;">
				Test Network Phase 2
				</div>
				
				
                <div class="flex-center btns" @click="shrinkStatus = !shrinkStatus" v-text="shrinkStatus ? 'fold' : 'unfold'"></div>
            </div>
            <div class="one-tcontent-next flex-l" :style="shrinkStatus ? 'overflow: unset;height: auto;' : ''">
                <div class="one-item">
                    <div class="itema flex-center">
                        <div>
                            <div data-i18n="index_t2"></div>
                            <div class="number">{$data.block_height}</div>
                        </div>
                    </div>
                </div>
                <div class="one-item">
                    <div class="itema flex-center">
                        <div>
                            <div data-i18n="index_t3"></div>
                            <div class="number">{$data.block_time} sec ago</div>
                        </div>
                    </div>
                </div>
                <div class="one-item">
                    <div class="itema flex-center">
                        <div>
                            <div data-i18n="index_t4"></div>
                            <div class="number">{$data.miner_power}</div>
                        </div>
                    </div>
                </div>
                <div class="one-item">
                    <div class="itema flex-center">
                        <div>
                            <div data-i18n="index_t5"></div>
                            <div class="number">{$data.active_miner}</div>
                        </div>
                    </div>
                </div>
                <div class="one-item">
                    <div class="itema flex-center">
                        <div>
                            <div data-i18n="index_t6"></div>
                            <div class="number">{$data.wallet_num}</div>
                        </div>
                    </div>
                </div>
                <div class="one-item">
                    <div class="itema flex-center">
                        <div>
                            <div data-i18n="index_t7"></div>
                            <div class="number">{$data.24h_reward} WD</div>
                        </div>
                    </div>
                </div>
				
                <div class="one-item">
                    <div class="itema flex-center">
                        <div>
                            <div ><span data-i18n="index_t7"></span> / Tib </div>
                            <div class="number">{$data.24h_reward_per_byte} WD</div>
                        </div>
                    </div>
                </div>
				
                <div class="one-item">
                    <div class="itema flex-center">
                        <div>
                            <div data-i18n="index_t8"></div>
                            <div class="number">{$data.24h_message_number}</div>
                        </div>
                    </div>
                </div>
                <div class="one-item">
                    <div class="itema flex-center">
                        <div>
                            <div data-i18n="index_t9"></div>
                            <div class="number">{$data.pleg_number} WD</div>
                        </div>
                    </div>
                </div>
                <div class="one-item">
                    <div class="itema flex-center">
                        <div>
                            <div data-i18n="index_t10"></div>
                            <div class="number">{$data.pleg_number_per_tib} WD/Tib</div>
                        </div>
                    </div>
                </div>
                <div class="one-item">
                    <div class="itema flex-center">
                        <div>
                            <div data-i18n="index_t11"></div>
                            <div class="number">{$data.gas_price} nanoWD</div>
                        </div>
                    </div>
                </div>
                <div class="one-item">
                    <div class="itema flex-center">
                        <div>
                            <div data-i18n="index_t12"></div>
                            <div class="number">{$data.circulating_calc} WD</div>
                        </div>
                    </div>
                </div>
				
                <div class="one-item">
                    <div class="itema flex-center">
                        <div>
                            <div data-i18n="index_t18"></div>
                            <div class="number">{$data.destory}WD</div>
                        </div>
                    </div>
                </div>
				
                <div class="one-item">
                    <div class="itema flex-center">
                        <div>
                            <div data-i18n="index_t13"></div>
                            <div class="number">{$data.all_num} WD</div>
                        </div>
                    </div>
                </div>
				
                <div class="one-item">
                    <div class="itema flex-center">
                        <div>
                            <div data-i18n="miner_t10"></div>
                            <div class="number">512MB</div>
                        </div>
                    </div>
                </div>
				<!--
                <div class="one-item">
                    <div class="itema flex-center">
                        <div>
                            <div data-i18n="index_t14"></div>
                            <div class="number">N/A</div>
                        </div>
                    </div>
                </div>
				-->
            </div>
        </div>
		
        <div class="flex-lr re-th-biu">
            <div class="content-one-wrap content-one-wrap-for">
                <div class="one-top-next flex-lr">
                    <div class="flex-l names">
                        <img src="/static/assets/images/index/svg2.svg" class="svg1" alt="">
                        <div data-i18n="index_t15"></div>
                    </div>
                    <!--<div class="flex-center btns" data-i18n="sp_more"></div>-->
                </div>
                <div class="one-tcontent-next one-tcontent-next-k">
                    <div class="kline-img" id="js_klinex"></div>
                </div>
            </div>
			
            <div class="content-one-wrap content-one-wrap-for">
                <div class="one-top-next flex-lr">
                    <div class="flex-l names">
                        <img src="/static/assets/images/index/svg3.svg" class="svg1" alt="">
                        <div data-i18n="index_t16"></div>
                    </div>
                    <!--<div class="flex-center btns" data-i18n="sp_more"></div>-->
                </div>
                <div class="one-tcontent-next one-tcontent-next-k">
                    <div class="kline-img" id="js_klinexOne"></div>
                </div>
            </div>
        </div>
		
        <div class="content-one-wrap">
            <div class="one-top-next flex-lr" style="border-bottom: 0;margin-bottom: 0">
                <div class="flex-l names">
                    <img src="/static/assets/images/index/svg4.svg" class="svg1" alt="">
                    <div data-i18n="index_t17"></div>
                </div>
            </div>
            <div class="two-tcontent-next" style="height:auto;">
                <div class="wk-list-text flex-lr">
                    <div class="name1" data-i18n="sp_rank"></div>
                    <div class="name2" data-i18n="sp_miner"></div>
                    <div class="name3" data-i18n="sp_minertag" style="width:30%;"></div>
                    <div class="name5" data-i18n="miner_t6"></div>
                    <div class="name4" data-i18n="sp_nrank1"></div>
                    <div class="name4" data-i18n="sp_nrank2"></div>
                    <div class="name8" data-i18n="sp_area"></div>
                </div>
				
				{foreach $level_data as $key=>$cd }
                <div class="wk-list-text wk-list flex-lr">
                    <div class="name1">
						<div>{$cd['i']}</div>
                    </div>
                    <div class="name2">
					<a href="/index/address/index/address/{$cd.miner}">{$cd.miner}</a>
					</div>
                    <div class="name3" style="width:30%;">
					{if $cd.tag}
					<a href="/index/address/index/address/{$cd.miner}">
					{$cd.tag}
					</a>
					<img style="width:12px;margin-left:10px;" src="/static/assets/images/signed.svg">{else}--{/if}
					</div>
                    <div class="name5">{$cd.QualityAdjPower}</div>
					<div class="name4 flex-center"><div class="schedule"><div class="schedule-in" style="width: {$cd.width}%;"></div></div><div>{$cd.width}%</div></div>
                    <div class="name4">{$cd.amount} WD</div>
                    <div class="name8">{$cd.area}</div>
                </div>
				{/foreach}
            </div>
        </div>
		
{/block}
{block name="footer"}
</div>
    <div class="footer-bottom-wrap">
        <div class="bottom-bubu flex-center">© 2020 WorldDataBase Project. All Rights Reserved.</div>
    </div>
	
    <script src="/static/assets/js/vue.js"></script>
    <script type="text/javascript">
        init_bui();
		function echar(){
		
			var domx = document.getElementById('js_klinex');
			var myChartx = echarts.init(domx);
			var optionx = {
				title: {
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left',
				},
				series: [
					{
						name: 'Adjusted Power',
						type: 'pie',
						radius: '50%',
						data: [
							{$series}
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};
			if (optionx && typeof optionx === "object") {
				myChartx.setOption(optionx, true);
			}
			
			var dom = document.getElementById('js_klinexOne');
			var myChart = echarts.init(dom);
			var option = {
				xAxis: {
					type: 'category',
					data: [{$str1}]
				},
				yAxis: {
					type: 'value',
					min: function (value) {
						return value.min - 20;
					}
				},
				series: [{
					data: [{$str2}],
					type: 'line',
					smooth: true
				}]
			};
			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		
		}
		
        function init_bui() {
            var _vue = new Vue({
                el: '#app',
                data: {
                    shrinkStatus: false,
                    shrinkStatus1: false,
                    selectStatus: false,
                    langState: false,
                    selextIx: null,
                    kgStatus: false,
					data: [],
                },
                created() {
				
                },
                mounted() {
                    //this.init();
					echar();
                },

                methods: {
				    init(){
					}
                },
            })
        }
		
    </script>
</html>
{/block}